<template>
  <div class="index-page">
    <!-- 头部   1-->
    <el-row>
      <el-col :span="24">
        <div class="head">
          this is head
        </div>
      </el-col>
    </el-row>

    <!-- 推荐链接 2 -->
    <el-row>
      <el-col :span="24">
        <div class="tuijian">
          this is tuijian
        </div>
      </el-col>
    </el-row>

    <!-- 门户网站  3 -->
    <el-row>
      <el-col :span="24">
        <div class="tuijian">
          门户网站
        </div>
      </el-col>
    </el-row>

    <!-- 门户网站，可展开 4 -->
    <el-row>
      <el-col :span="24">
        <div class="tuijian">
          门户网站，可展开
        </div>
      </el-col>
    </el-row>
    <!-- 新闻， 文章， 广告 -->
    <el-row>
      <!-- 左边 -->
      <el-col :span="6">
        <div class="">
          左边 新闻
        </div>
      </el-col>
      <!-- 右边 -->
      <el-col :span="18">
        <div class="">
          右边 文章 广告
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'daohang',
  components: {
    
  },
  props: {

  },
  created() {
    // console.log('jquery')
  },
  methods: {
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.head {
  background-color: red;
}
.tuijian {
  background-color: black;
  color: white;
}

</style>
